<template lang="pug">
div
  Card(v-if='question', style='margin-bottom: 20px')
    h3 {{ question.title }}
    div 提问者： {{ question.owner.name }}
    div 提问时间： {{ createTime }}

  Form(ref='form', :model='formData', :show-message='false', :label-width=80, :rules='validateRules')
    FormItem(label='回复人员', style='width: 320px', prop='uid')
      OperatorSelector(v-model='formData.uid')
      p 选择谁来回复
    FormItem(label='回答', style='width: 500px', prop='body', required)
      Input(type='textarea', v-model='formData.body')
      p 目前只支持文字回复
    FormItem
      Button(type='primary', :loading='loading', @click='submit') 提交
</template>

<script>
import questionApi from '@/apis/question'
import OperatorSelector from '@/components/OperatorSelector'

export default {
  components: {
    OperatorSelector
  },
  data () {
    return {
      loading: false,
      question: null,
      formData: {
        id: this.$route.params.id,
        uid: '',
        title: `问题${this.$route.params.id}的答案`,
        body: ''
      },
      validateRules: {
        uid: { required: true, message: '' },
        body: { required: true, message: '' }
      }
    }
  },
  computed: {
    createTime () {
      let date = new Date(this.question.created * 1000)
      return [date.getFullYear(), 1 + date.getMonth(), date.getUTCDate()].join('-')
      // return date
    }
  },
  mounted () {
    questionApi.getQuestion(this.$route.params.id)
      .then(data => {
        this.question = data.data
      })
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          questionApi.postQuestionAnswer(this.formData).then(() => {
            this.loading = false
            this.$Message.success('提交成功')
            this.$router.replace(`/questions/${this.$route.params.id}`)
          })
        }
      })
    }
  }
}
</script>

